<template>
    <el-form ref="form" :model="form" label-width="80px">
          <el-form-item prop="name">
            <div slot="label" style="margin-left:10px;">作者姓名</div>
            <el-input v-model="form.name" placeholder="请输入名称"></el-input>
          </el-form-item>
            <el-form-item prop="name">
          <div slot="label" style="margin-left:10px;">作者邮箱</div>
          <el-input v-model="form.region" placeholder="请输入对应信息" @blur="email_blur"></el-input>
           <span style="color: red">
    		{{message}}
    	    </span>
            <br>
            <br>
          <div>
             <el-button  type="primary" @click="changeYanzhengstate" >点击此处进行验证</el-button>
              <el-button  type="primary" @click="fatherdlete" >删除</el-button>
          </div>
           
            <el-dialog title="邮箱验证" :visible.sync="dialogVisible" width="50%" >
				<span>填写邮箱验证码</span>
				<br><br>
				<el-input v-model="userverify"></el-input>
				<span class="errTips" v-if="verifyingerr">* 验证码有误！ *</span>
				<span class="errTips" v-if="verifyingTLE">* 验证码超时，已重新发送至该邮箱！ *</span>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="check()">确 定</el-button>
				</span>
			</el-dialog>
          </el-form-item>
          
    </el-form>
  


</template>

<script>

  export default {
    props:{
      index:Number,
       form: {
          name: '',
          region: '',
        }
    },
    data() {
      return {
        userverify:'',
        verifyingerr:false,
		verifyingTLE:false,
        dialogVisible:false,
        message:'',
       
      }
     

    },
     methods: {
            fatherdlete(){
                  this.$parent.delete(this.index)
            },
            email_blur() {
                var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
                if (!verify.test(this.form.region)) {
                    this.message = '邮箱格式错误, 请重新输入'
                } else {
                    this.message = ''

                }
            },
            changeYanzhengstate(){
                this.dialogVisible=!this.dialogVisible
            }
        }

  }
</script>